<template>
<div class="my-product">
  <van-dropdown-menu>
    <van-dropdown-item title="综合"  disabled />
    <van-dropdown-item title="价格" v-model="priceVal" :options="option2" @change="priceChange"/>
    <van-dropdown-item title="分类" v-model="categoryVal" :options="filterCategory" @change="categoryChange"/>
  </van-dropdown-menu>
  {{categoryVal}}
  <product-list :goodsList="goodsList"></product-list>
  <van-empty v-if="!goodsList" image="search" description="搜索的结果不存在~" />
</div>
</template>

<script>
import ProductList from "@/components/ProductList";
export default {
  name: "MyProduct",
  props:['filterCategory','goodsList'],
  components:{
    ProductList
  },
  data() {
    return {
      priceVal: 0,
      categoryVal: 0,
      option2: [
          // 这个值 是后端设定的，和前端无关。
        { text: '由高到低', value: 'desc' },
        { text: '由低到高', value: 'asc' },
      ],
    };
  },
  methods:{
    categoryChange(value){
      this.$emit('categoryChange',value);
    },
    priceChange(value){
      this.$emit('priceChange',value);
    }
  },
  mounted() {
    this.filterCategory.map((val,index) => {
      if(val.checked) {
        this.categoryVal = val.value;
      }
    })
  }
}
</script>

<style scoped>

</style>